<template>
  <div class="footer">
    <!-- 输入框有两种状态,分别是激活前和激活后的 -->
    <!-- 第一种 激活前 -->
    <div class="disable" v-if="!isFocus">
      <input type="text" class="commentInput" placeholder="写跟帖" @focus="showArea" />
      <div class="commentIcon">
        <div class="commentNumber">{{post.comment_length}}</div>
        <span class="iconfont iconpinglun-"></span>
      </div>
      <span class="iconfont iconshoucang" @click="star" :class="{yellow:post.has_star}"></span>
      <span class="iconfont iconfenxiang"></span>
    </div>
    <div class="enable" v-if="isFocus">
      <textarea class="commentArea" rows="3" @blur="handleBlur" ref="commentArea" v-model="comment"></textarea>
      <div class="btnSend" @click="send">发送</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["post", "isActive", "replyObj"],

  data() {
    return {
      isFocus: false,
      comment: ""
    };
  },
  watch: {
    isActive() {
      console.log("这里是 parentid" + this.replyObj.id);
      console.log("这里是 文章id" + this.post.id);
      this.isFocus = this.isActive;
    }
  },
  methods: {
    handleBlur() {
      if (!this.comment) {
        this.isFocus = false;
      }
    },
    send() {
      //  this.comment='',
      //  this.isFocus=false
      this.$axios({
        url: "/post_comment/" + this.post.id,
        method: "post",
        data: {
          content: this.comment,
          parent_id: this.replyObj ? this.replyObj.id : null
        }
      }).then(res => {
        console.log(res.data);
       
        this.comment = "";
        this.isFocus = false;
        this.$emit('newComment');
      });
    },
    showArea() {
      this.isFocus = true;
      this.$nextTick(() => {
        this.$refs.commentArea.focus();
      });
    },
    star() {
      this.$axios({
        url: "/post_star/" + this.post.id,
        method: "get"
      }).then(res => {
        const { message } = res.data;
        if (message == "收藏成功") {
          this.post.has_star = true;
        } else if (message == "取消成功") {
          this.post.has_star = false;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.footer {
  background: #f8f8f8;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  .disable {
    display: flex;
    justify-content: space-between;
    align-self: center;
    padding: 2.778vw;
    .commentInput {
      height: 8.611vw;
      line-height: 8.611vw;
      font-size: 3.889vw;
      border: none;
      outline: none;
      border-radius: 4.444vw;
      padding: 0 4.444vw;
      background: #d7d7d7;
      color: #666;
    }
    .iconfont {
      font-size: 6.389vw;
    }
    .commentIcon {
      position: relative;
      .commentNumber {
        position: absolute;
        top: -8px;
        height: 4.444vw;
        line-height: 4.444vw;
        box-sizing: border-box;
        font-size: 3.333vw;
        background: red;
        color: white;
        border-radius: 2.222vw;
        padding: 0 2.222vw;
        left: 0.556vw;
      }
    }
  }
  .enable {
    display: flex;
    padding: 2.778vw;
    justify-content: space-between;
    align-items: flex-end;
    .commentArea {
      width: 75vw;
      background: #d7d7d7;
      color: #666;
      box-sizing: border-box;
      border: none;
      outline: none;
      border-radius: 2.222vw;
      padding: 4.444vw;
      resize: none;
    }
    .btnSend {
      background: red;
      color: white;
      padding: 0 4.167vw;
      height: 7.222vw;
      line-height: 7.222vw;
      border-radius: 3.611vw;
      border: 1px solid red;
      font-size: 14px;
    }
  }
}
.yellow {
  color: yellow;
}
</style>